<!DOCTYPE HTML> 
<html> 
<head> 
<title>DragnDrop demo</title> 
<style type="text/css"> 
#boxA, #boxB { 
  float:left; width:200px; height:200px; padding:10px; margin:10px;
}
 
#boxA { background-color: blue; }
#boxB { background-color: green; }
 
#drag {
  width:50px; height:50px; padding:5px; margin:5px;
  -moz-user-select:none;
}
#drag { background-color: red;}
 
</style> 
<script type="text/javascript"> 
function dragStart(target, e) {
    e.dataTransfer.effectAllowed='move';
    //ev.dataTransfer.dropEffect='move';
    e.dataTransfer.setData("Text", target.id);
    //ev.dataTransfer.setDragImage(ev.target,0,0);
    return true;
}
 
function dragDrop(target, e) {
    var idelt = e.dataTransfer.getData("Text");
    e.target.appendChild(document.getElementById(idelt));
    
	return false;
}
 
</script> 
</head> 
<body> 
    <div id="boxA"> 
      <div id="drag" draggable="true"
            ondragstart="return dragStart(this, event)">drag me</div> 
    </div> 
 
    <div id="boxB"
        ondrop="return dragDrop(this,event)" ondragenter="return false" ondragover="return false"> 
    </div>
</body> 
</html>